<template>
    <div id="reg">
      <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
        <h3 class="login_title">账号登录</h3>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
  
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"
            prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item class="button">

          
          <el-button type="primary" @click="login('loginForm')">提交</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
  
        <a href="javascript:" @click="toRegister()" class="home-button">去注册</a><a href="javascript:" class="home-button"
          @click="toHome()">回到主页</a>
  
      </el-form>
    </div>
    <!--
    <body id="poster">
      <el-form class="login-container" label-position="left" label-width="0px">
        <h3 class="login_title">系统登录</h3>
        <el-form-item>
          <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="reg">注册</el-button>
        </el-form-item>
      </el-form>
    </body>-->
  </template>
    
  <script>
  
  export default {
    name: 'login',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
  
          callback();
        }
      };
  
      return {
        loginForm: {
          username: '',
          password: ''
        }, rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          username: [
            { required: true, message: "请输入用户名！", trigger: "blur" },
            { min: 2, max: 10, message: "长度为2-10个字符", trigger: "blur" }
          ]
        },
        responseResult: []
      }
    },
    methods: {
  
      resetForm(loginForm) {
        this.$refs[loginForm].resetFields();
      },
      login(loginForm) {
        this.$refs[loginForm].validate((valid) => {
          if (valid) {
            var _this = this
            this.$axios
              .post('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              })
              .then(successResponse => {
                if (successResponse.data.code === 200) {
                  this.$message({
                    message: "登录成功，正在跳转",
                    type: 'success',
                    
                  })
                  // var data = this.loginForm
                  _this.$store.commit('login', _this.loginForm)
                  var path = this.$route.query.redirect
                  this.$router.replace({ path: path === '/' || path === undefined ? '/new' : path })
                } else {
                  this.$message({
                    message: "请重新输入！"
                  })
                }
              })
              .catch(failResponse => {
              })
  
          } else {
            this.$message({
              message: "请正确输入！"
            })
            console.log('error submit!!');
            return false;
          }
        });
  
  
  
      },
      toRegister() {
        this.$router.replace('/Register')
      },
      toHome() {
        this.$router.replace('/')
      }
  
    }
  }
  </script>
    
  <style>
  #reg {
    /*background-image: url("../../assets/image/back.jpg");*/
    background-image: url("http://47.93.99.8:81/img/back.jpg");
    
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  
  body {
    margin: 0px;
  }
  
  .demo-ruleForm {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 250px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  
  .button {
    position: relative;
    left: -40px;
  }
  
  .home-button {
    padding-left: 10%;
    text-decoration: none;
  }
  </style>
    
    